<template>
  <div class="operationPageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">所属企业:</span>
                <span class="searchInputFont">
                <el-select  v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo(true)" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">备案类型:</span>
                <span class="searchInputFont">
                <el-select v-model="searchInfo.registerType" size="mini" @change="searchRowsInfo(true)" clearable
                           placeholder="全部">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">指标编号:</span>
                <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.batchNo" @change="searchRowsInfo(true)" auto-complete="off" placeholder="指标编号"></el-input>
                </span>
              </div>
            </el-col>

            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
              <addBtn @searchRowsInfo="searchRowsInfo"></addBtn>
            </div>

          </el-row>
        </div>
      </div>
      <div class="tableContainer">
        <div class="tableInner" ref="tableInner">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              label="备案批次"
              prop="registerNo"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="企业名称"
              prop="enterpriseName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="备案类型"
              prop="registerType"
            >
              <template slot-scope="scope">
                {{scope.row.registerType?"回收":"投放"}}
            </template>
            </el-table-column>
            <el-table-column
              label="指标编号"
              prop="batchNo"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="备案数量"
              prop="registerCount"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="操作人员"
              prop="createName"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              label="下载"
              show-overflow-tooltip>
              <template slot-scope="scope">
              <i @click="downLoadXml(scope.row.downloadPath)" class="iconfont icon-xaizai"
                 style="margin-right: 10px;"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div  style="text-align: left;margin-top: 15px;">
          <el-row :gutter="10">
            <el-col :span="13" :offset="9">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchInfo.page"
                :page-sizes="[10, 30, 50, 100,200]"
                :page-size="searchInfo.rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="count">
              </el-pagination>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import addBtn from "./addBtn.vue"
  export default {
    props: [],
    data(){
      return {
        rows: [],
        options: [{label: "投放", value: 0}, {label: "回收", value: 1}],
        count: 0,
        tableHeight: 400,
        searchInfo: {
          registerType:"",
          enterpriseNo:"",
          batchNo:"",
          page: 1,
          rows: 10,
        },
        streetData: [],
      }
    },
    components: {addBtn},
    created(){
      this.searchRowsInfo()

    },
    mounted(){
      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".operationPageWrap").clientHeight-160
      })
    },

    methods: {
      downLoadXml(url){
        window.location.href = url
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo()

      },
      //获取所有信息
      searchRowsInfo(val){
        val?this.searchInfo.page=1:""
        this.axios.post(process.env.API_HOST + `/vehicle/selectPutVehicleGrid`, this.searchInfo)
          .then(response => {
            const result = response.data
            if(result.code==200){
              this.rows = result.rows
              this.count = result.total;
            }
          })
      },
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .operationPageWrap
    page()

</style>
